<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单中心 - 护工助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/icons.css">
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #F6F8FA;
            color: #333;
            line-height: 1.5;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding-bottom: 70px;
        }
        
        /* 顶部导航栏 */
        .page-header {
            background-color: #fff;
            padding: 15px;
            text-align: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .page-title {
            font-size: 18px;
            font-weight: 500;
        }
        
        /* 订单类型选项卡 */
        .order-tabs {
            display: flex;
            background-color: #fff;
            margin-bottom: 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .tab-item {
            flex: 1;
            text-align: center;
            padding: 15px 0;
            font-size: 14px;
            color: #666;
            cursor: pointer;
            position: relative;
        }
        
        .tab-item.active {
            color: #2B7DE1;
            font-weight: 500;
        }
        
        .tab-item.active:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            width: 50%;
            height: 3px;
            background-color: #2B7DE1;
            border-radius: 3px 3px 0 0;
        }
        
        /* 订单卡片 */
        .order-card {
            background-color: white;
            border-radius: 10px;
            margin: 15px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .order-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .order-title {
            font-size: 16px;
            font-weight: 500;
        }
        
        .order-status {
            font-size: 14px;
            padding: 2px 8px;
            border-radius: 4px;
        }
        
        .status-ongoing {
            background-color: #E6F7FF;
            color: #1890FF;
        }
        
        .status-completed {
            background-color: #F6FFED;
            color: #52C41A;
        }
        
        .status-complaint {
            background-color: #FFF2E8;
            color: #FA541C;
        }
        
        .patient-info {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .patient-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #E6F7FF;
            color: #1890FF;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 10px;
        }
        
        .patient-details {
            flex: 1;
        }
        
        .patient-name {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 3px;
        }
        
        .patient-desc {
            font-size: 12px;
            color: #666;
        }
        
        .order-info {
            background-color: #F6F8FA;
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 15px;
        }
        
        .info-item {
            display: flex;
            margin-bottom: 8px;
        }
        
        .info-item:last-child {
            margin-bottom: 0;
        }
        
        .info-label {
            width: 70px;
            color: #666;
            font-size: 14px;
            flex-shrink: 0;
        }
        
        .info-value {
            color: #333;
            font-size: 14px;
            flex: 1;
        }
        
        .order-actions {
            display: flex;
            gap: 10px;
        }
        
        .action-btn {
            flex: 1;
            padding: 10px 0;
            border-radius: 6px;
            font-size: 14px;
            text-align: center;
            cursor: pointer;
        }
        
        .btn-primary {
            background-color: #2B7DE1;
            color: white;
        }
        
        .btn-secondary {
            background-color: #f0f0f0;
            color: #666;
        }
        
        .btn-warning {
            background-color: #FFF2E8;
            color: #FA541C;
        }
        
        /* 投诉卡片 */
        .complaint-card {
            background-color: white;
            border-radius: 10px;
            margin: 15px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .complaint-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .complaint-title {
            font-size: 16px;
            font-weight: 500;
            color: #FA541C;
        }
        
        .complaint-date {
            font-size: 12px;
            color: #999;
        }
        
        .complaint-content {
            font-size: 14px;
            color: #333;
            background-color: #F6F8FA;
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 15px;
        }
        
        .complaint-reply {
            font-size: 14px;
            color: #333;
            padding: 12px;
            border-radius: 6px;
            border-left: 3px solid #2B7DE1;
            background-color: #F0F8FF;
        }
        
        .reply-header {
            font-size: 12px;
            color: #666;
            margin-bottom: 5px;
        }
        
        /* 订单转移弹窗 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        .modal.active {
            display: flex;
        }
        
        .modal-content {
            width: 90%;
            max-width: 400px;
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .modal-header {
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-title {
            font-size: 16px;
            font-weight: 500;
        }
        
        .modal-close {
            font-size: 20px;
            color: #999;
            cursor: pointer;
        }
        
        .modal-body {
            padding: 20px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-label {
            display: block;
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
        }
        
        .form-select {
            width: 100%;
            height: 40px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            padding: 0 12px;
            font-size: 14px;
            background-color: white;
        }
        
        .form-textarea {
            width: 100%;
            height: 80px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            padding: 8px 12px;
            font-size: 14px;
            resize: none;
        }
        
        .modal-footer {
            padding: 15px;
            border-top: 1px solid #f0f0f0;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .modal-btn {
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            border: none;
        }
        
        .btn-cancel {
            background-color: #f0f0f0;
            color: #666;
        }
        
        .btn-confirm {
            background-color: #2B7DE1;
            color: white;
        }
        
        /* 底部导航栏 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
            max-width: 600px;
            margin: 0 auto;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #666;
            font-size: 12px;
            text-decoration: none;
        }
        
        .nav-item.active {
            color: #2B7DE1;
        }
        
        .nav-icon {
            font-size: 22px;
            margin-bottom: 2px;
        }
        
        /* 内容区域 */
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 40px 0;
            color: #999;
        }
        
        .empty-icon {
            font-size: 48px;
            margin-bottom: 15px;
        }
        
        .empty-text {
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部标题 -->
        <div class="page-header">
            <div class="page-title">订单中心</div>
        </div>
        
        <!-- 订单类型选项卡 -->
        <div class="order-tabs">
            <div class="tab-item active" data-tab="ongoing-orders">已接订单</div>
            <div class="tab-item" data-tab="completed-orders">已完成订单</div>
            <div class="tab-item" data-tab="complaints">订单投诉</div>
        </div>
        
        <!-- 已接订单内容 -->
        <div class="tab-content active" id="ongoing-orders">
            <!-- 订单1 -->
            <div class="order-card">
                <div class="order-header">
                    <div class="order-title">内科护理服务</div>
                    <div class="order-status status-ongoing">服务中</div>
                </div>
                <div class="patient-info">
                    <div class="patient-avatar">李</div>
                    <div class="patient-details">
                        <div class="patient-name">李先生</div>
                        <div class="patient-desc">65岁 | 高血压 | 内科</div>
                    </div>
                </div>
                <div class="order-info">
                    <div class="info-item">
                        <div class="info-label">服务时间：</div>
                        <div class="info-value">2023-06-15 08:00~17:00</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">服务地点：</div>
                        <div class="info-value">北京协和医院 5号楼 302室</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">服务费用：</div>
                        <div class="info-value">¥280/天</div>
                    </div>
                </div>
                <div class="order-actions">
                    <div class="action-btn btn-primary" onclick="window.location.href='order-detail.html?id=12345'">查看详情</div>
                    <div class="action-btn btn-secondary" onclick="showTransferModal('12345', '李先生')">订单转移</div>
                </div>
            </div>
            
            <!-- 订单2 -->
            <div class="order-card">
                <div class="order-header">
                    <div class="order-title">骨科护理服务</div>
                    <div class="order-status status-ongoing">服务中</div>
                </div>
                <div class="patient-info">
                    <div class="patient-avatar">王</div>
                    <div class="patient-details">
                        <div class="patient-name">王奶奶</div>
                        <div class="patient-desc">78岁 | 骨折康复 | 骨科</div>
                    </div>
                </div>
                <div class="order-info">
                    <div class="info-item">
                        <div class="info-label">服务时间：</div>
                        <div class="info-value">2023-06-12 08:00~17:00</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">服务地点：</div>
                        <div class="info-value">北京友谊医院 2号楼 508室</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">服务费用：</div>
                        <div class="info-value">¥320/天</div>
                    </div>
                </div>
                <div class="order-actions">
                    <div class="action-btn btn-primary" onclick="window.location.href='order-detail.html?id=12346'">查看详情</div>
                    <div class="action-btn btn-secondary" onclick="showTransferModal('12346', '王奶奶')">订单转移</div>
                </div>
            </div>
        </div>
        
        <!-- 已完成订单内容 -->
        <div class="tab-content" id="completed-orders">
            <!-- 订单1 -->
            <div class="order-card">
                <div class="order-header">
                    <div class="order-title">外科护理服务</div>
                    <div class="order-status status-completed">已完成</div>
                </div>
                <div class="patient-info">
                    <div class="patient-avatar">张</div>
                    <div class="patient-details">
                        <div class="patient-name">张先生</div>
                        <div class="patient-desc">58岁 | 术后康复 | 外科</div>
                    </div>
                </div>
                <div class="order-info">
                    <div class="info-item">
                        <div class="info-label">服务时间：</div>
                        <div class="info-value">2023-06-08 09:00~18:00</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">服务地点：</div>
                        <div class="info-value">北京友谊医院 3号楼 205室</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">服务费用：</div>
                        <div class="info-value">¥350/天</div>
                    </div>
                </div>
                <div class="order-actions">
                    <div class="action-btn btn-primary">查看详情</div>
                    <div class="action-btn btn-secondary">查看评价</div>
                </div>
            </div>
            
            <!-- 订单2 -->
            <div class="order-card">
                <div class="order-header">
                    <div class="order-title">内科护理服务</div>
                    <div class="order-status status-completed">已完成</div>
                </div>
                <div class="patient-info">
                    <div class="patient-avatar">刘</div>
                    <div class="patient-details">
                        <div class="patient-name">刘女士</div>
                        <div class="patient-desc">62岁 | 糖尿病 | 内科</div>
                    </div>
                </div>
                <div class="order-info">
                    <div class="info-item">
                        <div class="info-label">服务时间：</div>
                        <div class="info-value">2023-06-05 08:00~17:00</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">服务地点：</div>
                        <div class="info-value">北京协和医院 1号楼 405室</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">服务费用：</div>
                        <div class="info-value">¥280/天</div>
                    </div>
                </div>
                <div class="order-actions">
                    <div class="action-btn btn-primary">查看详情</div>
                    <div class="action-btn btn-secondary">查看评价</div>
                </div>
            </div>
        </div>
        
        <!-- 订单投诉内容 -->
        <div class="tab-content" id="complaints">
            <!-- 投诉1 -->
            <div class="complaint-card">
                <div class="complaint-header">
                    <div class="complaint-title">服务态度投诉</div>
                    <div class="complaint-date">2023-06-10</div>
                </div>
                <div class="patient-info">
                    <div class="patient-avatar">赵</div>
                    <div class="patient-details">
                        <div class="patient-name">赵女士</div>
                        <div class="patient-desc">订单号：202306050023</div>
                    </div>
                </div>
                <div class="complaint-content">
                    护工服务期间经常玩手机，对患者的呼叫反应迟缓，态度不够热情，希望改进。
                </div>
                <div class="complaint-reply">
                    <div class="reply-header">客服回复（2023-06-11）：</div>
                    您好，非常抱歉给您带来不好的体验。我们已经对相关护工进行了批评教育，并安排了服务培训。同时给您提供了200元的补偿金，请查收。如有其他问题，请随时联系我们。
                </div>
                <div class="order-actions">
                    <div class="action-btn btn-primary">查看订单</div>
                    <div class="action-btn btn-secondary">回复</div>
                </div>
            </div>
            
            <!-- 投诉2 -->
            <div class="complaint-card">
                <div class="complaint-header">
                    <div class="complaint-title">专业技能投诉</div>
                    <div class="complaint-date">2023-06-02</div>
                </div>
                <div class="patient-info">
                    <div class="patient-avatar">钱</div>
                    <div class="patient-details">
                        <div class="patient-name">钱先生</div>
                        <div class="patient-desc">订单号：202306010015</div>
                    </div>
                </div>
                <div class="complaint-content">
                    护工在帮助患者翻身时动作不够轻柔，导致患者感到疼痛。希望加强专业技能培训。
                </div>
                <div class="complaint-reply">
                    <div class="reply-header">客服回复（2023-06-03）：</div>
                    您好，感谢您的反馈。我们非常重视您的意见，已经安排了护理部主管对该护工进行了专业技能指导和培训。我们已经为您更换了一位经验更丰富的护工，并提供了50%的服务费减免。如有其他需求，请随时联系我们。
                </div>
                <div class="order-actions">
                    <div class="action-btn btn-primary">查看订单</div>
                    <div class="action-btn btn-secondary">回复</div>
                </div>
            </div>
        </div>
        
        <!-- 订单转移弹窗 -->
        <div class="modal" id="transferModal">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">订单转移</div>
                    <div class="modal-close" onclick="closeTransferModal()">&times;</div>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label">转移订单</label>
                        <div class="order-info" id="transferOrderInfo">
                            李先生的护理服务（订单号：12345）
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">转移给</label>
                        <select class="form-select" id="transferTarget">
                            <option value="1">王护工（内科 | 5年经验）</option>
                            <option value="2">李护工（内科 | 7年经验）</option>
                            <option value="3">张护工（全科 | 10年经验）</option>
                            <option value="4">赵护工（内科 | 3年经验）</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">转移原因</label>
                        <textarea class="form-textarea" placeholder="请填写转移原因..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="modal-btn btn-cancel" onclick="closeTransferModal()">取消</button>
                    <button class="modal-btn btn-confirm" onclick="confirmTransfer()">确认转移</button>
                </div>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <nav class="bottom-nav">
            <a href="index.html" class="nav-item">
                <span class="nav-icon">🏠</span>
                <span>首页</span>
            </a>
            <a href="signin-center.html" class="nav-item">
                <span class="nav-icon">✓</span>
                <span>签到中心</span>
            </a>
            <a href="orders.html" class="nav-item active">
                <span class="nav-icon">📋</span>
                <span>订单中心</span>
            </a>
            <a href="profile.html" class="nav-item">
                <span class="nav-icon">👤</span>
                <span>我的</span>
            </a>
        </nav>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 选项卡切换功能
            const tabItems = document.querySelectorAll('.order-tabs .tab-item');
            const tabContents = document.querySelectorAll('.tab-content');
            
            tabItems.forEach(item => {
                item.addEventListener('click', function() {
                    const tabId = this.getAttribute('data-tab');
                    
                    // 更新选项卡状态
                    tabItems.forEach(tab => tab.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 更新内容区域
                    tabContents.forEach(content => content.classList.remove('active'));
                    document.getElementById(tabId).classList.add('active');
                });
            });
        });
        
        // 显示订单转移弹窗
        function showTransferModal(orderId, patientName) {
            const modal = document.getElementById('transferModal');
            const orderInfo = document.getElementById('transferOrderInfo');
            
            orderInfo.textContent = `${patientName}的护理服务（订单号：${orderId}）`;
            modal.classList.add('active');
            
            // 存储当前订单ID，用于后续操作
            modal.setAttribute('data-order-id', orderId);
        }
        
        // 关闭订单转移弹窗
        function closeTransferModal() {
            const modal = document.getElementById('transferModal');
            modal.classList.remove('active');
        }
        
        // 确认转移订单
        function confirmTransfer() {
            const modal = document.getElementById('transferModal');
            const orderId = modal.getAttribute('data-order-id');
            const transferTarget = document.getElementById('transferTarget');
            const targetName = transferTarget.options[transferTarget.selectedIndex].text;
            const reason = document.querySelector('.form-textarea').value;
            
            if (!reason.trim()) {
                alert('请填写转移原因');
                return;
            }
            
            // 这里应该是向后端发送请求的逻辑
            // 模拟请求成功
            alert(`订单 ${orderId} 已成功转移给 ${targetName}`);
            
            // 关闭弹窗
            closeTransferModal();
            
            // 从页面移除该订单卡片
            const orderCards = document.querySelectorAll('.order-card');
            orderCards.forEach(card => {
                if (card.querySelector('.order-actions').innerHTML.includes(orderId)) {
                    card.style.opacity = '0.5';
                    card.querySelector('.order-status').textContent = '已转移';
                    card.querySelector('.order-status').className = 'order-status';
                    
                    // 禁用按钮
                    const buttons = card.querySelectorAll('.action-btn');
                    buttons.forEach(btn => {
                        btn.classList.add('btn-secondary');
                        btn.classList.remove('btn-primary');
                        btn.style.pointerEvents = 'none';
                    });
                }
            });
        }
    </script>
</body>
</html> 